const FINGERS = {
  index1: 8,
  index2: 7,
  index3: 6,
  index4: 5,
  middle1: 12,
  middle2: 11,
  middle3: 10,
  middle4: 9,
  ring1: 16,
  ring2: 15,
  ring3: 14,
  ring4: 13,
  little1: 20,
  little2: 19,
  little3: 18,
  little4: 17,
  thumb1: 4,
  thumb2: 3,
  thumb3: 2,
  thumb4: 1,
  thumb5: 0
}


let frame = null,
  hands = null,
  hand_num = 2;


function initHandWorks(video, actions) {

  hands = new Hands({
    locateFile: (file) => {
      // 加载js库
      return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
    }
  });

  hands.setOptions({
    selfieMode: false, //是否自拍，即是否使用前置摄像头
    maxNumHands: hand_num, //最大识别手部数量
    minDetectionConfidence: 0.5, //识别精度，这个数值越高，则要求图像高评分才能被识别 默认 0.5
    minTrackingConfidence: 0.5 //跟踪速度，数值越高，花费时间越长
  });

  async function process() {
    await hands.send({ image: video });
    frame = window.requestAnimationFrame(process);
  }

  function onSolved(res) {
    if (res.multiHandedness) {

      let marks = res.multiHandLandmarks
      let side = res.multiHandedness;

      // 如果双手或误判
      if (res.multiHandedness.length === 2) {
        // 如果误判(两只手异常接近)
        if (Math.abs(marks[0][FINGERS.index1].x - marks[1][FINGERS.index1].x) <= 0.3 &&
          Math.abs(marks[0][FINGERS.index1].y - marks[1][FINGERS.index1].y) <= 0.3) {
          // console.log('请使用两只手进行操作');
          // actions(null);
        } else {
          side.forEach(el => {
            el.label === 'Left' ? actions(aciton_Hand_left(marks[el.index]), el.label) : actions(aciton_Hand_right(marks[el.index]), el.label)
          })
        }
      }

      // 单只手  (单只手时方向相反的原因可能是摄像头镜像导致的, 需要再探究)
      else if (res.multiHandedness.length === 1) {
        // console.log('请使用两只手进行操作');
        actions(null, 'Right');
      }

    }
  }

  function aciton_Hand_right(arr) {
    if (is_index(arr)) return 'w'; // 你的右手食指正伸直: 前进
    if (is_thumb(arr)) return is_thumb(arr) === 'left' ? 'a' : 'd'; // 左转 右转
    if (is_index_middle(arr)) return 's'; // 后退
    return null
  }

  function aciton_Hand_left(arr) {
    if (is_Open(arr)) return 'shift'; // 五指伸开为加速
    if (is_index(arr)) return ' '; // 跳跃
    return null
  }

  // 判断是否五指伸开
  function is_Open(arr) {
    if (arr[FINGERS.index1].y < arr[FINGERS.index4].y && arr[FINGERS.index2].y < arr[FINGERS.index4].y &&
      arr[FINGERS.middle1].y < arr[FINGERS.middle4].y && arr[FINGERS.middle2].y < arr[FINGERS.middle4].y &&
      arr[FINGERS.ring1].y < arr[FINGERS.ring4].y && arr[FINGERS.ring2].y < arr[FINGERS.ring4].y &&
      arr[FINGERS.little1].y < arr[FINGERS.little4].y && arr[FINGERS.little2].y < arr[FINGERS.little4].y) {
      console.log('左手五指伸开');
      return true;
    } else return false;
  }

  // 判断是否食指伸直
  function is_index(arr) {
    if (arr[FINGERS.index1].y < arr[FINGERS.index3].y && arr[FINGERS.index2].y < arr[FINGERS.index4].y &&
      arr[FINGERS.middle1].y > arr[FINGERS.middle4].y && arr[FINGERS.ring1].y > arr[FINGERS.ring4].y &&
      arr[FINGERS.little1].y > arr[FINGERS.little4].y) {
      console.log('食指伸直');
      return true;
    } else return false;
  }

  // 判断是否大拇指伸直
  function is_thumb(arr) {
    if (arr[FINGERS.index1].y > arr[FINGERS.index3].y && arr[FINGERS.middle1].y > arr[FINGERS.middle3].y &&
      arr[FINGERS.ring1].y > arr[FINGERS.ring3].y && arr[FINGERS.little1].y > arr[FINGERS.little3].y) {
      console.log('大拇指伸直');
      if (arr[FINGERS.thumb1].x > arr[FINGERS.middle1].x && arr[FINGERS.thumb1].x > arr[FINGERS.thumb2].x) return 'left';
      if (arr[FINGERS.thumb1].x < arr[FINGERS.middle1].x && arr[FINGERS.thumb1].x < arr[FINGERS.thumb2].x) return 'right';
      return false;
    } else return false;
  }

  // 判断是否食指和中指伸直
  function is_index_middle(arr) {
    if (arr[FINGERS.index1].y < arr[FINGERS.index3].y && arr[FINGERS.index2].y < arr[FINGERS.index4].y &&
      arr[FINGERS.middle1].y < arr[FINGERS.middle3].y && arr[FINGERS.middle2].y < arr[FINGERS.middle4].y &&
      arr[FINGERS.ring1].y > arr[FINGERS.ring4].y && arr[FINGERS.little1].y > arr[FINGERS.little4].y) {
      console.log('食指和中指伸直');
      return true;
    } else return false;
  }

  hands.onResults(onSolved);

  process();
  console.log('RequestAnimationFrames on')

}

function closeHandWorks() {

  window.cancelAnimationFrame(frame);
  console.log('RequestAnimationFrames all closed!')

}

export {

  FINGERS,
  initHandWorks,
  closeHandWorks

}